<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>美食</title>
		<style>
			*{
			    margin: 0;
			    padding: 0;
			    list-style: none;
			}
			img{
			  width: 307px;
			  height: 400px;
			}
			li{
				text-decoration: none;
				list-style: none;
				border-bottom: #000000 1px solid;
				text-align: center;
				line-height: 80px;
				
			}
			a{
				color: black;
				text-decoration: none;
			}
			
			.box{
				width: 430px;
				height: 400px;
				border: black 1px solid;
				margin: 100px auto;
				
				
			}
			.left{
				float: left;
				width: 60px;
				height: 400px;
			}
			.right{
				border-left: #000000 1px solid;
				float: right;
				width: 60px;
				height: 400px;
			}
			
			.center{
				float: left;
				width: 307px;
				height: 400px;
				border-left: #000000 1px solid;
				border-right: #000000 1px solid;
				text-align: center;
				overflow: hidden;
			}
			.left li:last-child, .right li:last-child
			{border-bottom: none;}
			
		</style>
	</head>
	<body>
		<div class="box">
			<div class="left">
				<ul>
					<li><a href="#">美食1</a></li>
					<li><a href="#">美食2</a></li>
					<li><a href="#">美食3</a></li>
					<li><a href="#">美食4</a></li>
					<li><a href="#">美食5</a></li>
				</ul>            
			</div>               
			<div class="center">
				<a href=""><img src="img/美食1.jpg" alt=""></a>
				<a href=""><img src="img/美食2.jpg" alt=""></a>
				<a href=""><img src="img/美食3.jpg" alt=""></a>
				<a href=""><img src="img/美食4.jpg" alt=""></a>
				<a href=""><img src="img/美食5.jpg" alt=""></a>
				<a href=""><img src="img/美食6.jpg" alt=""></a>
				<a href=""><img src="img/美食7.jpg" alt=""></a>
				<a href=""><img src="img/美食8.jpg" alt=""></a>
				<a href=""><img src="img/美食9.jpg" alt=""></a>
				<a href=""><img src="img/美食10.jpg" alt=""></a>
			</div>      
			<div class="right">     
				<ul>            
					<li><a href="#">美食6</a></li>
					<li><a href="#">美食7</a></li>
					<li><a href="#">美食8</a></li>
					<li><a href="#">美食9</a></li>
					<li><a href="#">美食10</a></li>
				</ul>
			</div>
		</div>
	</body>
	<script>
		window.onload = function(){
			var allli = document.getElementsByTagName("li");
			var allimg = document.getElementsByTagName("img");
			
			var a = 0;
			setInterval(function(){
				allimg[a].style.display ="block";
				allli[a].style.backgroundColor="red";
				a+=1;
				a%=10;
				for(var i=0; i<allli.length;i++)
				{allimg[i].style.display ="none";
				allli[i].style.background ="";}
				
				allimg[a].style.display ="block";
				allli[a].style.background ="red";
				
			},800)
		
		}
		
		
		
		
	</script>
</html>
